<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .inline-block {
            display: inline-block;
        }

        @media screen and (min-width:600px) {
            .teacher-list li {
                display: inline;
            }
            .teacher-block {
                width: 33%;
            }

            .avatar-block img {
                float: left;
                width: 100px;
                height: 100px;
            }

            .teacher-content {
                margin-left: 100px;
            }
        }

        @media screen and (max-width:599px) {

        }

        .avatar-block {
            position: relative;
        }


        .debug {
            border: 1px solid darkgreen;
        }
    </style>
</head>
<body>
    <div class="main-rank">
        <ul class="teacher-list">
            <li>
                <div class="teacher-block inline-block debug">
                    <div class="avatar-block">
                        <img src="" class="debug">
                    </div>
                    <div class="teacher-content">
                        <p>Hello1</p>
                        <p>Hello2</p>
                        <p>Hello3</p>
                        <p>Hello4</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="teacher-block inline-block debug">
                    <div class="avatar-block">
                        <img src="" class="debug">
                    </div>
                    <div class="teacher-content">
                        <p>Hello1</p>
                        <p>Hello2</p>
                        <p>Hello3</p>
                        <p>Hello4</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="teacher-block inline-block debug">
                    <div class="avatar-block">
                        <img src="" class="debug">
                    </div>
                    <div class="teacher-content">
                        <p>Hello1</p>
                        <p>Hello2</p>
                        <p>Hello3</p>
                        <p>Hello4</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="teacher-block inline-block debug">
                    <div class="avatar-block">
                        <img src="" class="debug">
                    </div>
                    <div class="teacher-content">
                        <p>Hello1</p>
                        <p>Hello2</p>
                        <p>Hello3</p>
                        <p>Hello4</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="teacher-block inline-block debug">
                    <div class="avatar-block">
                        <img src="" class="debug">
                    </div>
                    <div class="teacher-content">
                        <p>Hello1</p>
                        <p>Hello2</p>
                        <p>Hello3</p>
                        <p>Hello4</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="teacher-block inline-block debug">
                    <div class="avatar-block">
                        <img src="" class="debug">
                    </div>
                    <div class="teacher-content">
                        <p>Hello1</p>
                        <p>Hello2</p>
                        <p>Hello3</p>
                        <p>Hello4</p>
                    </div>
                </div>
            </li>
            <li>
                <div class="teacher-block inline-block debug">
                    <div class="avatar-block">
                        <img src="" class="debug">
                    </div>
                    <div class="teacher-content">
                        <p>Hello1</p>
                        <p>Hello2</p>
                        <p>Hello3</p>
                        <p>Hello4</p>
                    </div>
                </div>
            </li>
        </ul>

        <div class="debug">
            haha
        </div>
    </div>
</body>
</html>